*{
    margin: 0;
    padding: 0;
}
 /* DEFINE CSS GRID Layout*/
body{
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto auto 80% auto;
    grid-template-areas: 
    'header header'
    'splitter splitter'
    'navside main'
    'footer footer';
}
@media (width < 768px){
    body{
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
    'navside main'
    'footer footer';
    }
    header{
    display: none;
}
section{
    display: none;
}
nav{
    display: none;
}
article{
    padding: .5em;
    width: 90%;
}
}
header{
    /*top: 0; DISABLED
    position: sticky;*/
    grid-area: header;
}
section{
    grid-area: splitter;
}
nav{
    grid-area: navside;
    
}
main{
    grid-area: main;
    margin-left: .8em;
}
footer{
    grid-area: footer;
}
/* DEFINE CSS FLEX Layout*/
.flexheader{
    display: flex;
}
.flexnav{
    display: flex;
}
.flexnavmenu{
    display: flex;
}
/* DEFINE ARTICEL Layout*/
article{
    padding: .5em;
    width: 60%;
}
article h1 {
    padding-bottom: 1em;
}
article h2{
    padding-bottom: .6em;
}
article h4{
    padding-bottom: .5em;
}
article h5{
    padding-bottom: .5em;
}
article p {
    padding: 5px;
    margin-bottom: .5em;
}
article ol{
    margin-left: 2.5em;
}
article ul{
    margin-left: 2.5em;
}
.movenav{
    text-align: center;
}
/* DEFINE FOOTER Layout*/
footer{
    text-align: center;
    height: 5em;
    margin-top: 5.5em;
}
footer p{
    padding-top: 1.2em;
}